<template>
  <!-- <el-select
    v-model="dataValue"
    :disabled="disabled"
    style="width: 100%;"
    placeholder="请选择"
    @change="valueChange">
    <el-option
      v-for="(item, index) in option"
      :key="index"
      :label="item.name"
      :value="item.value"/>
  </el-select> -->
  <el-autocomplete
      style="width: 100%"
      popper-class="input-popper"
      :maxlength="maxLength"
      show-word-limit
      v-model="item.value"
      :fetch-suggestions="querySearch"
      placeholder="请输入" />
</template>
<script type="text/javascript">
import stringMixin from './stringMixin'

export default {
  name: 'XhSelect', // 新建 select
  components: {},
  mixins: [stringMixin],
  props: {
    maxLength: {
      type: Number,
      default: 10
    },
  },
  data() {
    return {
      option: []
    }
  },
  computed: {},
  watch: {
    item: {
      handler(val) {
        if (val && val.data.setting) {
          var settingList = val.data.setting
          if (settingList.length > 0) {
            var array = []
            for (let index = 0; index < settingList.length; index++) {
              const element = settingList[index]
              array.push({ name: element.name, value: element.value })
            }
            this.option = array
          } 
        } else {
          this.option = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    // 付款条件选项过滤
    querySearch(queryString, cb) {
        var restaurants = this.option;
        var results = queryString ? restaurants.filter(item => {return item.value.indexOf(queryString) != -1}) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
    },
  }
}
</script>
<style lang="scss" scoped>
</style>
